import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.1
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1

import Enginio 1.0


Window {
    id: mainWindow
    title: "Run"
    flags: Qt.Dialog
    width: 400
    height: 640

    signal backPressed
    property variant runningWindow: Qt.createComponent("RunningWindow.qml").createObject(this)

    Rectangle {
        id: mainRect
        color: "#f4f4f4"
        anchors.fill: parent
        focus: true

        Header {
            id: header
            iconSource: "qrc:images/run.png"
            title: "Run"
        }

        EnginioModel {
            id: enginioModel
            client: EnginioClient {
                id: enginioClient
                backendId: "52dd09f3e5bde50ccc000cff"

                onError: console.log("Enginio error: " + reply.errorCode + ": " + reply.errorString)
                onFinished: console.log("Enginio finished: " + reply)
            }
            query: {"objectType": "objects.schedule" }
        }

        ListView {
            id: listview
            model: enginioModel
            delegate: listItemDelegate
            anchors.top: header.bottom
            width: parent.width
            height: parent.height - header.height
            clip: true

            // Animations
            add: Transition { NumberAnimation { properties: "y"; from: root.height; duration: 250 } }
            removeDisplaced: Transition { NumberAnimation { properties: "y"; duration: 150 } }
            remove: Transition { NumberAnimation { property: "opacity"; to: 0; duration: 150 } }
        }

        Component {
            id: listItemDelegate

            BorderImage {
                id: item
                width: parent.width ; height: 70
                border.left: 5; border.top: 5
                border.right: 5; border.bottom: 5

                Rectangle {
                    id: editImg
                    anchors.left: parent.left
                    anchors.leftMargin: 16
                    width: 32
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    id: todoText
                    text: name
                    font.pixelSize: 26
                    color: "#333"

                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: editImg.right
                    anchors.right: parent.right
                    anchors.leftMargin: 12
                    anchors.rightMargin: 40
                    elide: Text.ElideRight
                }

                // Show a delete button when the mouse is over the delegate
                Image {
                    id: runIcon
                    height: todoText.height
                    width: height
                    source: startMouseArea.pressed ? "qrc:images/start_pressed.png" : "qrc:images/start.png"
                    anchors.margins: 20
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    opacity: enabled ? 1 : 0.5
                    Behavior on opacity {NumberAnimation{duration: 100}}
                    MouseArea {
                        id: startMouseArea
                        anchors.fill: parent
                        onClicked: {
                            mainWindow.runningWindow.scheduleName = name

                            mainWindow.hide()
                            mainWindow.runningWindow.show();
                            console.log("run")
                        }
                    }
                }
                Rectangle {
                    width: parent.width ; height: 1
                    anchors.bottom: parent.bottom
                    color: "#bbb"
                }
            }
        }

        Keys.onReleased: {
            if ( event.key === Qt.Key_Back && visible )
            {
                console.log("Back button captured - wunderbar !")
                event.accepted = true
                backPressed()
            }
        }

        Component.onCompleted: {
            console.log("onCompleted")
            runningWindow.backPressed.connect(backPressed)
        }

        function backPressed() {
            console.log("backPressed")
            runningWindow.hide()
            mainWindow.show()
            mainRect.focus = true
        }
    }
}
